<template>
  <div>
    <el-row class="colBox" style="height:138px" :gutter="25">
      <el-col :span="6">
        <div class="grid-contentB ep-bg-purple">
          <div class="conlef1 conlef">
            <el-icon>
              <BellFilled />
            </el-icon>
          </div>
          <div class="conrig">
            <p style="font-size: 20px;line-height: 36px;">23</p>
            <p style="font-size: 14px;color: #666;">待收费数据（条）</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-contentB ep-bg-purple">
          <div class="conlef conlef2">
            <el-icon>
              <TrophyBase />
            </el-icon>
          </div>
          <div class="conrig">
            <p style="font-size: 20px;line-height: 36px;">4444</p>
            <p style="font-size: 14px;color: #666;">待收费金额（元）</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-contentB ep-bg-purple">
          <div class="conlef conlef3">
            <el-icon>
              <Notebook />
            </el-icon>
          </div>
          <div class="conrig">
            <p style="font-size: 20px;line-height: 36px;">52</p>
            <p style="font-size: 14px;color: #666;">欠费数据（条）</p>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-contentB ep-bg-purple">
          <div class="conlef conlef4">
            <el-icon>
              <Medal />
            </el-icon>
          </div>
          <div class="conrig">
            <p style="font-size: 20px;line-height: 36px;">879</p>
            <p style="font-size: 14px;color: #666;">欠费金额（元）</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="height:500px" :gutter="25">
      <el-col :span="12">
        <div class="grid-content ep-bg-purple">
          <div class="wordBox">
            <p><span></span>商品租赁情况</p>
          </div>
          <div class="echartDiv" ref="ed1">
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content ep-bg-purple">
          <div class="wordBox">
            <p><span></span>月度收费</p>
          </div>
          <div class="echartDiv" ref="ed2">
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- <el-row style="height:400px">
      <el-col :span="24">
        <div class="ditu grid-content ep-bg-purple">
        </div>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
export default {
  name: 'DashBoard',
  data () {
    return {
      // 饼状图信息
      option1: {
        title: {
          text: '商品租赁情况',
          left: 'center'
          // top: 'ce'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
          data: ['空置', '出租', '出售']
        },
        series: [{
          type: 'pie',
          data: [{
            value: 100,
            name: '空置'
          }, {
            value: 10,
            name: '出租'
          }, {
            value: 12,
            name: '出售'
          }]
        }],
        legendHoverLink: true,
        tooltip: {
          show: true,
          formatter: '{b0}: {c0}({d0}%)'
        },
        color: ['#409EFF', '#e11a1a', '#7b1ae1']
      },
      // 柱状图参数
      option2: {
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: [35, 14, 28, 20, 42, 22, 16],
            showBackground: true
          }
        ],
        tooltip: {
          show: true,
          formatter: '{b0}: {c0}'
        }
      }
    }
  },
  methods: {
    initEchart1 () {
      const myChart = this.$echarts.init(this.$refs.ed1)
      myChart.setOption(this.option1)
    },
    initEchart2 () {
      const myChart = this.$echarts.init(this.$refs.ed2)
      myChart.setOption(this.option2)
    }
  },
  mounted () {
    this.initEchart1()
    this.initEchart2()
  }
}
</script>

<style lang="scss" scoped>
.colBox {
  margin-bottom: 20px;
  color: #e11a1a
}

.el-row {
  margin-bottom: 20px;
  height: 100%;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
  box-sizing: border-box;
}

.grid-content {
  border-radius: 4px;
  background-color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;

  .wordBox {
    height: 55px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    border-bottom: 1px solid #e6ebf5;
    margin-bottom: 10px;

    span {
      border-left: 4px solid #1890ff;
      padding-left: 8px;
    }
  }

  .echartDiv {
    flex: 1;
    padding-bottom: 20px
  }
}

.grid-contentB {
  border-radius: 4px;
  min-height: 36px;
  background-color: #fff;
  height: 100%;
  padding-left: 30px;
  box-sizing: border-box;
  display: flex;
  align-items: content;

  .conlef {
    width: 66px;
    height: 66px;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    border-radius: 40px;
  }

  .conlef1 {
    background: #f2ebfb;
    color: #7b1ae1;
  }

  .conlef2 {
    background: #edf8fe;
    color: #4ab8ff;
  }

  .conlef3 {
    background: #fff7e4;
    color: #ff8b58;
  }

  .conlef4 {
    background: #fff2f5;
    color: #fc5b87;
  }

  .conrig {
    padding-top: 40px;
    margin-left: 10px;
  }
}
</style>
